<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :on-remove="handleRemove"
      :http-request="uploadFn"
      :file-list="filelist"
      :limit="1"
      :class="{active:filelist.length>0}"
    >

      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-if="showPercen" class="xxxxx" type="circle" :percentage="percen" />

  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDymKbbKmysWtzoMddMoyrUqwmMfhSxA6l',
  SecretKey: 'PYPzIK5ZmiNlrgEVVEgrmQovlKcdNq1w'
})
export default {
  data() {
    return {
      filelist: [],
      showPercen: false,
      percen: ''
    }
  },
  methods: {
    handleRemove() {
      this.filelist = []
    },
    uploadFn(file) {
      console.log(55, this.filelist.length)
      this.showPercen = true
      this.filelist.push({ url: '' })
      cos.putObject({
        Bucket: 'hr-project-75-1312551896', /* 必须 */
        Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */
        Key: (Date.now()).toString(), /* 必须 */
        StorageClass: 'STANDARD',
        Body: file.file, // 上传文件对象
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          this.percen = progressData.percent * 100
        }
      }, (err, data) => {
        if (err) {
          return this.$message.error('上传失败')
        }
        this.filelist[0].url = 'http://' + data.Location
        console.log(this.filelist.length)
        const timer = setTimeout(() => {
          this.showPercen = false
          clearTimeout(timer)
        }, 1000)
        this.$emit('addEvent', this.filelist)
      })
    }
  }
}
</script>

<style lang='scss'>
// .el-upload{
//   // position: relative;
  .xxxxx{
    position: absolute;
    left: 12px;
    top: 15px;
  }

// }
  .active{
    .el-upload--picture-card {
      display: none;
    }
  }

</style>
